import React,{Component} from "react"
import {observer} from "mobx-react"
import cartmobx from "*/mobx/cart"
import "./index.scss"
import {
    Table,
    Input,
    Button,
    Checkbox,
    Collapse,
    Tag
}from "antd"
import {DeleteOutlined} from "@ant-design/icons"
@observer
 class Mycart extends Component{
     componentWillMount(){
         cartmobx.getCartList("/api/getmycartlist");
     }
     state={
        columns:[
            {
                title:"选中",
                render:(text,recode,index)=>{
                    return <Checkbox checked={text.ischeck} onChange={(checked)=>this.changeOneCheck(checked,text.goodId)}/>
                }
            },
            {
                title:"商品名称",
                render:(text)=>{
                return <p>{text.good.name}</p>
                }
            },
            {
                title:"图片",
                render:(text)=>{
                    return <img style={{width:100,height:100}} src={text.good.img} alt=""/>
                }
            },
            {
                title:"单价",
                render:(text)=>{
                return <Tag color="success">{text.good.price}</Tag>
                }
            },
            {
                title:"数量",
                render:(text)=>{
                    return <Input value={text.count} style={{width:70}} type="number" onChange={(event)=>this.changeCount(event,text.goodId)}/>
                }
            },
            {
                title:"小计/元",
                render:(text)=>{
                return <p>{text.good.price*text.count*1}</p>
                }
            },
            {
                title:"操作",
                render:(text)=>{
                    return <Button type="danger"  onClick={()=>this.delMyCartOne(text.goodId)}  icon={<DeleteOutlined /> }  size="small" > 删除</Button>
                }
            }
        ]
     }
     changeOneCheck=(e,goodId)=>{
        cartmobx.changeOneCheck(e.target.checked,goodId)
     }
     changeCount=(e,goodId)=>{
        var count=e.target.value;
        if(count>0){
            cartmobx.changeOneCount(count*1,goodId)
        }
     }
     delMyCartOne=(goodId)=>{
        cartmobx.delOneGood(goodId)
     }
     changequan=(e)=>{
        cartmobx.quan = e.target.checked;
     }
     delCheck=()=>{
        cartmobx.changeDelCheck();
       
     }
    render(){
        return(
            <div>
                <h2>我的在线购物车</h2>
                
                <Table
                    dataSource={cartmobx.cartlist}
                    columns={this.state.columns}
                    rowKey={
                        (item)=>(item._id)
                    }
                    style={{marginTop:20,border:"2px solid #ccc",borderBottom:"0"}}
                    pagination={{pageSize:6}}
                >
                </Table>
                <div className="bg" style={{border:"2px solid #ccc",display:"flex",height:"60px",alignItems:"center",borderTop:"0"}}>
                    <div style={{flex:"1"}}>

                    <span><Checkbox checked={cartmobx.quan}  onChange={event=>this.changequan(event)} style={{marginLeft:20}} > 全选反选  </Checkbox> </span>
                    <span style={{marginLeft:20}}>总计: {cartmobx.total} /元  </span>
                    <span style={{marginLeft:40}}>总数量: {cartmobx.carnum} /件 </span>
                    </div>
                    <Button style={{marginRight:"20px"}} type="danger" onClick={this.delCheck}>删除选中</Button>
                </div>
            </div>
        )
    }
}
export default Mycart